import React, { useRef, useState, useEffect, useCallback } from 'react'
import { Row, Col, Button } from "antd";
import InputNumberWithSuffix from "@common/presentational/InputNumberWithSuffix";
import {CloseOutlined} from "@ant-design/icons";
import notify from "@utils/tip";
import {priceFenToYuan, priceYuanToFen} from "@utils/priceConversion";
const GradientRules = props => {
    const { value, onChange } = props
    const [minusSettingsList, setMinusSettingsList] = useState(value)

    useEffect(() => {
        if (value) {
            setMinusSettingsList(value)
        }
    }, [value])

    const handleActivityChange = (index, type,value) => {
        const targetMinusSettings = minusSettingsList[index]
        // if (type === 'quota' && targetMinusSettings['price'] && value <= targetMinusSettings['price'] ||
        //     type === 'price' && targetMinusSettings['quota'] && value >= targetMinusSettings['quota']
        // ) {
        //     notify('活动需满金额需要大于活动可减金额', 'error')
        //     return
        // }
        if (type === 'quota' && minusSettingsList.filter((line,i) => line.quota === value && i !== index).length) {
            notify('该满减阶梯已存在', 'error')
            return
        }
        const _minusSettingsList = [
            ...minusSettingsList.slice(0, index),
            {
                ...targetMinusSettings,
                [type]: priceYuanToFen(value),
            },
            ...minusSettingsList.slice(index + 1),
        ]
        onChange(_minusSettingsList)
    }

    const addActivityLine = () => {
        onChange([
            ...minusSettingsList,
            {
                quota: '',
                price: ''
            }
        ])
    }

    const removeActivityLine = (index) => {
        onChange([
            ...minusSettingsList.slice(0, index),
            ...minusSettingsList.slice(index + 1),
        ])
    }

    return (
        <div className='gradient-rules-setting'>
            {minusSettingsList.map((minusSettings, index) => (
                <div key={index} className="activity-detail-settings-line">
                    <span className='mgr-8'>订单满</span>
                    <InputNumberWithSuffix value={priceFenToYuan(minusSettings.quota)}
                        min={0.01}
                        max={100000}
                        step={1}
                        precision={2}
                        onChange={handleActivityChange.bind(this,index,'quota')}
                        placeholder="请输入金额" style={{ width: '180px' }}
                        suffix={(
                            <span>元</span>
                        )}
                    />
                    <span className='mgl-8 mgr-8'>立减</span>
                    <InputNumberWithSuffix value={priceFenToYuan(minusSettings.price)}
                        min={0.01}
                        max={100000}
                        step={1}
                        precision={2}
                        onChange={handleActivityChange.bind(this,index,'price')}
                        placeholder="请输入金额" style={{ width: '180px' }}
                        suffix={(
                            <span>元</span>
                        )}
                    />
                    {minusSettingsList.length === 1 ? null :
                        <CloseOutlined className="cur-poi ft-12 ft-clr-ml mgl-16" onClick={removeActivityLine.bind(this, index)}/>
                    }
                </div>
            ))}
            <Button className="button-small mgt-16"
                    type="primary"
                    ghost
                    onClick={addActivityLine}
            >＋添加规则</Button>
        </div>
    )
}

export default GradientRules